import React, { memo, useEffect } from 'react'
import MainWrapper from '@/common/MainWrapper'
import { Col, Row } from 'antd'
import About from '@/components/b_about'
import UserProfile from '@/components/b_user_profile'
import { shallowEqual, useSelector } from 'react-redux'

function B_Profile(props) {
  const { localId, userId } = props

  const { userProfile = {} } = useSelector(
    (state) => ({
      userProfile: state.blogReducer.getIn(['userProfile'])
    }),
    shallowEqual
  )

  useEffect(() => {
    document.title = '关于我'
  }, [])

  const { individual } = userProfile

  return (
    <MainWrapper>
      <Row>
        <Col
          lg={{ span: 12, offset: 3 }}
          md={{ span: 14, offset: 2 }}
          sm={{ span: 22, offset: 1 }}
          xs={{ span: 22, offset: 1 }}
        >
          <UserProfile
            individual={individual}
            userId={userId}
            localId={localId}
          />
        </Col>
        <Col
          lg={{ span: 5, offset: 1 }}
          md={{ span: 5, offset: 1 }}
          sm={{ span: 0 }}
          xs={{ span: 0 }}
        >
          <About />
        </Col>
      </Row>
    </MainWrapper>
  )
}

export default memo(B_Profile)
